<template>
	<div class="t12" >
		<div class="d2" style="width: 1440px;margin: auto;min-width: 1440px;">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="按科目选" name="first" :key="'first'">
					<p>
						说明：按照教育部规定，《普通高校招生专业选考科目要求》公布了高校在各省拟招生专业的选考科目要求（注意，不是最终的专业计划安排）。在实行“3+1+2”选科模式的省份，对不提科目要求或没有提出首选科目要求的专业，在高考实施年份，会安排在首选科目为物理类还是历史类科目下，应以高考当年各高校公布的招生计划为准。另外，
						由于受跨省招生计划数限制等因素，《要求》中高校公布的所有专业并非都会在我省安排招生计划。
					</p>
					<div style=" display: inline;">
						<el-form :inline="true" :model="form" class="demo-form-inline"
							style="padding: 0;margin: 0;">
							<el-form-item label="地域(省份)">
								<el-select v-model="areaName" clearable>
									<el-option v-for="item in shengfen" :label="item.dictName" :value="item.dictName"
										:key="item.dictName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="选科要求" style="font-weight: bold;margin-left: 2%;">
								<el-select v-model="courseRequire" clearable>
									<el-option v-for="item in yaoqiu" :label="item.dictName" :value="item.dictName"
										:key="item.dictName"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="批次" style="font-weight: bold;margin-left: 2%;">
								<el-radio-group v-model="type">
									<el-radio label="1">本科</el-radio>
									<el-radio label="2">专科</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item style="margin-left: 2%;">
								<el-button type="primary" @click="onSubmit1()">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" border style="width: 100%;margin-top: 16px;" :cell-style="cellStyles"
							:header-cell-style="{textAlign: 'center'}">
							<el-table-column prop="areaName" label="地域(省份)" width="100">
							</el-table-column>
							<el-table-column prop="schoolName" label="院校名称" width="280">
							</el-table-column>
							<el-table-column prop="majorName" label="专业名称" width="">
							</el-table-column>
							<el-table-column prop="courseRequire" label="选考要求" width="200">
							</el-table-column>
							<el-table-column prop="type" label="批次" width="100">
								<template slot-scope="scope">
									{{scope.row.type==1?"本科":"专科"}}
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							:current-page="pageObject.pageNum" :page-sizes="[5,10, 20, 50, 100]"
							:page-size="pageObject.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="pageObject.total"></el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="按学校选" name="second" :key="'second'">
					<p>
						说明：按照教育部规定，《普通高校招生专业选考科目要求》公布了高校在各省拟招生专业的选考科目要求（注意，不是最终的专业计划安排）。在实行“3+1+2”选科模式的省份，对不提科目要求或没有提出首选科目要求的专业，在高考实施年份，会安排在首选科目为物理类还是历史类科目下，应以高考当年各高校公布的招生计划为准。另外，
						由于受跨省招生计划数限制等因素，《要求》中高校公布的所有专业并非都会在我省安排招生计划。
					</p>
					<div style=" display: inline;">
						<el-form :inline="true" :model="school" class="demo-form-inline">
							<el-form-item label="地域(省份)">
								<el-select v-model="areaName2" clearable>
									<el-option v-for="item in shengfen" :label="item.dictName" :value="item.dictName"
										:key="item.dictName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="院校名称" style="font-weight: bold;margin-left: 2%;">
								<el-row class="demo-autocomplete" style="display: inline-block;width: 11vw;">
								  <el-col :span="12" style="display: inline-block;width:100%;">
								    <el-autocomplete
								      class="inline-input"
								      v-model="schoolName"
								      :fetch-suggestions="querySearch1"
								      placeholder="请输入内容"
								      :trigger-on-focus="false"
									  size="mini"
									  style="width: 100%;"
								    ></el-autocomplete>
								  </el-col>
								  </el-row>
							</el-form-item>
							<el-form-item style="margin-left: 2%;">
								<el-button type="primary" @click="onSubmit2()">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" border style="width: 100%;"
							:header-cell-style="{textAlign: 'center'}" :cell-style="cellStyles">
							<el-table-column prop="areaName" label="地域(省份)" width="100">
							</el-table-column>
							<el-table-column prop="schoolName" label="院校名称" width="280">
							</el-table-column>
							<el-table-column prop="majorName" label="专业名称" width="">
							</el-table-column>
							<el-table-column prop="courseRequire" label="选考要求" width="200">
							</el-table-column>
							<el-table-column prop="type" label="批次" width="100">
								<template slot-scope="scope">
									{{scope.row.type==1?"本科":"专科"}}
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							:current-page="pageObject.pageNum" :page-sizes="[5,10, 20, 50, 100]"
							:page-size="pageObject.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="pageObject.total"></el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="按专业选" name="third" :key="'third'">
					<p>
						说明：按照教育部规定，《普通高校招生专业选考科目要求》公布了高校在各省拟招生专业的选考科目要求（注意，不是最终的专业计划安排）。在实行“3+1+2”选科模式的省份，对不提科目要求或没有提出首选科目要求的专业，在高考实施年份，会安排在首选科目为物理类还是历史类科目下，应以高考当年各高校公布的招生计划为准。另外，
						由于受跨省招生计划数限制等因素，《要求》中高校公布的所有专业并非都会在我省安排招生计划。
					</p>
					<div style=" display: inline;">
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="地域(省份)">
								<el-select v-model="areaName3" clearable>
									<el-option v-for="item in shengfen" :label="item.dictName" :value="item.dictName"
										:key="item.dictName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="专业名称" style="font-weight: bold;margin-left: 2%;">
								<el-row class="demo-autocomplete" style="display: inline-block;width: 11vw;">
								  <el-col :span="12" style="display: inline-block;width:100%;">
								    <el-autocomplete
								      class="inline-input"
								      v-model="majorName"
								      :fetch-suggestions="querySearch"
								      placeholder="请输入内容"
								      :trigger-on-focus="false"
									  size="mini"
									  style="width: 100%;"
								    ></el-autocomplete>
								  </el-col>
								  </el-row>
							</el-form-item>
							<el-form-item style="margin-left: 2%;">
								<el-button type="primary" @click="onSubmit3()">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" border style="width: 100%;" :cell-style="cellStyles"
							:header-cell-style="{textAlign: 'center'}">
							<el-table-column prop="areaName" label="地域(省份)" width="100">
							</el-table-column>
							<el-table-column prop="schoolName" label="院校名称" width="280">
							</el-table-column>
							<el-table-column prop="majorName" label="专业名称" width="">
							</el-table-column>
							<el-table-column prop="courseRequire" label="选考要求" width="200">
							</el-table-column>
							<el-table-column prop="type" label="批次" width="100">
								<template slot-scope="scope">
									{{scope.row.type==1?"本科":"专科"}}
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							:current-page="pageObject.pageNum" :page-sizes="[5,10, 20, 50, 100]"
							:page-size="pageObject.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="pageObject.total"></el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {
		request
	} from "../util/request.js"
	export default {
		data() {
			return {
				areaName: null, //地域搜索
				areaName2: null, //地域搜索
				areaName3: null, //地域搜索
				courseRequire: null, //要求搜索
				type: null, //批次搜索
				schoolNames:[],
				majorNames:[],
				schoolName: null, //院校搜索
				majorName: null, //专业搜索
				shengfen: [],
				yaoqiu: [],
				tableData: [],
				pageObject: {
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				activeName: "first",
				formInline: {
					user: '',
					region: ''
				},
				form: {
					region: '',
					type: [],
					resource: ''
				},
				school: {
					name: '',
					region: ''
				}
			}
		},
		methods: {
			getSchoolName() {
				request({
					method: 'get',
					url: 'electiveCourseInfo/getSchoolName'
				}).then(res => {
					this.schoolNames = res.data
				})
			},
			getMajorName() {
				request({
					method: 'get',
					url: 'electiveCourseInfo/getMajorName'
				}).then(res => {
					this.majorNames = res.data
				})
			},
			querySearch(queryString, cb) {
			        var restaurants = this.majorNames;
			        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			        // 调用 callback 返回建议列表的数据
			        cb(results);
			      },
			createFilter(queryString) {	
			        return (restaurant) => {
			          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
			        };
			      },
			querySearch1(queryString, cb) {
			        var restaurants = this.schoolNames;
			        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			        // 调用 callback 返回建议列表的数据
			        cb(results);
			      },
			handleClick(){
				this.areaName=null
				this.courseRequire=null
				this.type=null
				this.areaName2=null
				this.schoolName=null
				this.areaName3=null
				this.majorName=null
				this.onSubmit1()
			},
			cellStyles({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 2) {
					return `textAlign:left;`;
				} else {
					return 'textAlign:center'
				}
			},
			getXuanKe() {
				this.isLoad = true
				request({
					method: 'post',
					url: 'electiveCourseInfo/getXuanKe',
					data: this.pageObject
				}).then(res => {
					this.page = res.data
					this.pageObject.total = res.data.total
					this.tableData = res.data.list,
					this.isLoad = false
				})
			},
			getshengfen() {
				request({
					method: 'Get',
					url: 'sysDict/getDict',
					params: {
						dictType: 'area_code_type'
					}
				}).then(res => {
					this.shengfen = res.data
				})
			},
			getyaoqiu() {
				request({
					method: 'Get',
					url: 'sysDict/getDict',
					params: {
						dictType: 'course_require_type'
					}
				}).then(res => {
					this.yaoqiu = res.data
				})
			},
			//页数变更事件
			handleCurrentChange(val) {
				this.pageObject.pageNum = val;
				this.getXuanKe()
			},
			//每页显示数量变更事件
			handleSizeChange(val) {
				this.pageObject.pageSize = val
				this.getXuanKe()
			},
			onSubmit1() {
				this.isLoad = true
				this.pageObject.areaName=this.areaName
				this.pageObject.courseRequire=this.courseRequire
				this.pageObject.type=this.type
				this.pageObject.majorName=null
				this.pageObject.schoolName=null
				request({
					method: 'post',
					url: 'electiveCourseInfo/getXuanKe',
					data: this.pageObject
				}).then(res => {	
					this.page=res.data
					this.pageObject.total=res.data.total
					this.tableData = res.data.list,
					this.isLoad = false
				})
			},
			onSubmit2() {
				this.isLoad = true
				this.pageObject.areaName=this.areaName2
				this.pageObject.schoolName=this.schoolName
				this.pageObject.courseRequire=null
				this.pageObject.type=null
				this.pageObject.majorName=null
				request({
					method: 'post',
					url: 'electiveCourseInfo/getXuanKe',
					data: this.pageObject
				}).then(res => {	
					this.page=res.data
					this.pageObject.total=res.data.total
					this.tableData = res.data.list,
					this.isLoad = false
				})
			},
			onSubmit3() {
				this.isLoad = true
				this.pageObject.areaName=this.areaName3
				this.pageObject.majorName=this.majorName
				this.pageObject.schoolName=null
				this.pageObject.courseRequire=null
				this.pageObject.type=null
				request({
					method: 'post',
					url: 'electiveCourseInfo/getXuanKe',
					data: this.pageObject
				}).then(res => {	
					this.page=res.data
					this.pageObject.total=res.data.total
					this.tableData = res.data.list,
					this.isLoad = false
				})
			}
		},
		created() {
			this.getshengfen()
			this.getyaoqiu()
			this.getXuanKe()
			this.getSchoolName()
			this.getMajorName()
		}
	}
</script>

<style>
	.t12 {
/* 		overflow-x: hidden;
		overflow-y: hidden; */
		margin: 0;
		padding: 0;
		width: 100%;
	}



	.t12 #tab-first {
		width: 480px;
		text-align: center;
	}

	.t12 #tab-second {
		width: 480px;
		text-align: center;
	}

	.t12 #tab-third {
		width: 480px;
		text-align: center;
	}

	.t12 td {
		width: 100%;
		text-align: center;
	}

	.t12 .title {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.t12 .title a {
		text-decoration: none;
		color: blue;
	}

	.t12 {
		font-size: 15px;
	}

	.t12 button {
		font-size: 15px;
		width: 80px;
		border-radius: 5px;
		height: 30px;
		background-color: coral;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		border: 1px solid transparent;
		font-weight: 900;
		line-height: 5px;
	}

	.t12 input {
		height: 28px;
	}

	.t12 .el-radio {
		width: 20%;
	}

	.t12 .el-checkbox-group {
		width: 100%;
	}

	.t12 .el-checkbox-group .el-checkbox {
		width: 15%;
	}

	.t12 .has-gutter th {
		text-align: center;
	}

	.t12 .el-table__row .el-table_1_column_1 .cell {
		text-align: center;
	}

	.t12 .el-table__row .el-table_2_column_6 .cell {
		text-align: center;
	}

	.t12 .el-table__row .el-table_3_column_13 .cell {
		text-align: center;
	}

	.t12 .el-table__row td {
		height: 10px;
	}
</style>
